<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in">
      <div class="cornerComment-in-title">
        <span>Set Components</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody" ref="dialogBox">
        <div class="components-box" :style="{height: tableHeight+'px'}">
          <div class="components-left">
            <div class="components-left-top">
              <headerData :componentsData="componentsData" :dataoption="dataoption"></headerData>
            </div>
            <div class="components-left-footer">
              <footerData ref="child" @getChildData="getChildData" :detailComponente="detailComponente"></footerData>
            </div>
          </div>
          <div class="components-right">
            <rightData :tableHeight="tableHeight" @changeCompontents="changeCompontents"
                       :detailType="detailType"></rightData>
          </div>
        </div>
      </div>
      <div class="cornerComment-in-footer">
        <el-button size="small" @click="closePOpup">cancel</el-button>
        <el-button size="small" type="primary" @click="saveLine">Save</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import headerData from './components/header-data'
import footerData from './components/footer-data'
import rightData from './components/right-data'
import {panelComponentsAdd, panelComponentsEditOne, panelEdit, panelComponentsDetail} from '@/api/system/board'
// detailId 看板id； mainData 当前看板的组件总和 ；detailOption 看板详情；componentsId 当前组件id
export default {
  props: ['visible', 'detailId', 'mainData', 'detailOption', 'componentsId'],
  name: "boxDetail",
  components: {
    headerData,
    footerData,
    rightData
  },
  data() {
    return {
      dialogVisible: false,
      tableHeight: 0,
      dataList: [],
      detail: {
        panelId: '', // 看板id
        style: '', // 1图形2折线数据
        type: '', // 1设备2分类
        lin: 0, // 行
        col: 0, // 列
        width: 1, // 宽
        height: 1, // 高
        number: '', // 序列
        body: '', // 组件信息 id：分类、设备id ；sku：字段
        config: '', // 配置
      },
      detailComponente: null,
      componentsData: null, // 当前组件
      dataoption: null, // 当前数据
      numberType: '', // 当前组件全路径
      detailType: ''
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        let n = this
        this.$nextTick(() => {
          let height = n.$refs.dialogBox.offsetHeight;
          n.tableHeight = height - 22
        })
        if (this.componentsId) {
          this.getComponentsfn()
        }
      } else {
        this.detailComponente = null
        this.componentsData = null // 当前组件
        this.dataoption = null // 当前数据
        this.numberType = '' // 当前组件全路径
        this.detailType = ''
      }
    }
  },
  created() {

  },
  mounted() {
    // let n = this
    // this.$nextTick(() => {
    //   let height = n.$refs.dialogBox.offsetHeight;
    //   n.tableHeight = height - 22
    // })
  },
  methods: {
    closePOpup() {
      this.$emit('update:visible', false)
    },
    saveLine() {
      this.$refs.child.getData(2);
    },
    getChildData(option) {
      // datType 2 保存提交 1 更新页面数据
      if (option.datType === 2) {
        console.log('option:', option.data)
        let data_ = {
          panelId: this.detailId, // 看板id
          style: 1, // 1图形2折线数据
          type: '', // 1设备2分类
          lin: 0, // 行
          col: 0, // 列
          width: 3, // 宽
          height: 3, // 高
          number: this.numberType, // 组件类型
          body: '', // 组件信息 id：分类、设备id ；sku：字段
          config: '', // 配置 整体组件样式/设置
        }
        data_.body = JSON.stringify(option.data.body)
        data_.type = option.data.type
        console.log('data_:', data_)
        // let status =1
        // if(status){
        //   return
        // }
        if(this.componentsId){
          data_.id = this.componentsId
          panelComponentsEditOne(data_).then(res => {
            if (res.code === 200) {
              this.getColListChange(res.data)
            }
          })
        }else{
          panelComponentsAdd(data_).then(res => {
            if (res.code === 200) {
              this.getColListChange(res.data)
            }
          })
        }
      } else {
        this.dataoption = JSON.parse(JSON.stringify(option.data))
      }
    },
    // 每个格子变化了
    getColListChange(item_id) {
      let list_ = JSON.parse(JSON.stringify(this.mainData))
      list_.push({
        "x": 0, // 第几列
        "y": 0, // 第几行
        "w": 3, // 初始宽度，值为colWidth的倍数。
        "h": 3, // 初始高度，值为rowHeight的倍数。
        "i": item_id, // 栅格中元素的ID
      })
      let data_ = {
        id: this.detailId,
        name: this.detailOption.name,
        description: this.detailOption.description,
        position: JSON.stringify(list_)
      }
      panelEdit(data_).then(res => {
        if (res.code === 200) {
          this.$message.success(res.msg)
          this.$emit('getInitPage')
          this.closePOpup()
        }
      })
    },
    getComponentsfn() {
      panelComponentsDetail(this.componentsId).then(res => {
        let {data} = res
        this.detailType = data.number
        this.detailComponente = data
      })
    },
    changeCompontents(option) {
      // this.componentsData = JSON.parse(JSON.stringify(option))
      this.numberType = option
      this.componentsData = option.split('-')[1]
    }
  }
}
</script>

<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 99%;
  height: 97%;
  background: rgba(245, 246, 250, 1);
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  overflow: hidden;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
  background: #fff;

}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
  background: #fff;
}

.commentBody {
  padding: 10px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

.vue-grid-item {
  background: aquamarine;
}

.components-box {
  display: flex;
  height: 100px;
}

.components-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-right: 10px;
}

.components-left-top {
  background: #fff;
  margin-bottom: 10px;
  height: 260px;
  border: 1px solid #ebeef5;
  border-radius: 5px;
  box-shadow: 0 1px 2px #ddd;
}

.components-left-footer {
  background: #fff;
  flex: 1;
  overflow-y: auto;
  border: 1px solid #ebeef5;
  border-radius: 5px;
  box-shadow: 0 1px 2px #ddd;
}

.components-right {
  width: 550px;
  background: #fff;
  border: 1px solid #ebeef5;
  border-radius: 5px;
  box-shadow: 0 1px 2px #ddd;
  height: 100%;
}
</style>
